<template>
	<view>
		<!-- #ifndef MP-WEIXIN -->
		<u-navbar title="浏览记录" back-icon-color="#f1f1f1" :border-bottom="false" title-color="#f1f1f1" :background="navbarBackground">
			<text class="slot" slot="right" @tap="showPopup = true">清空记录</text>
		</u-navbar>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar title="浏览记录" back-icon-color="#f1f1f1" :border-bottom="false" title-color="#f1f1f1" :background="navbarBackground">
			<view class="slot"><text @tap="showPopup = true">清空记录</text></view>
		</u-navbar>
		<!-- #endif -->
		<view class="main">
			<!-- #ifdef MP-WEIXIN -->
			<u-sticky :enable="enable" offset-top="128">
				<view class="select">
					<u-dropdown><u-dropdown-item v-model="selectTime" title="按时间查看" :options="options"></u-dropdown-item></u-dropdown>
				</view>
			</u-sticky>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<u-sticky :enable="enable" offset-top="88">
				<view class="select">
					<u-dropdown><u-dropdown-item v-model="selectTime" title="按时间查看" :options="options"></u-dropdown-item></u-dropdown>
				</view>
			</u-sticky>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<u-sticky :enable="enable">
				<view class="select">
					<u-dropdown><u-dropdown-item v-model="selectTime" title="按时间查看" :options="options"></u-dropdown-item></u-dropdown>
				</view>
			</u-sticky>
			<!-- #endif -->
			<view class="list">
				<view class="item" v-for="item in videoList" :key="item.id" @tap="handleToLive(item)">
					<u-image width="100%" height="200" :src="item.banner"></u-image>
					<view class="item-info">
						<text class="item-title">{{ item.title }}</text>
						<text class="item-time">{{ item.start_time.slice(0, 16) }}</text>
						<view class="item-pv">
							<u-image width="35" height="35" :src="require('../../../static/image/pv.png')"></u-image>
							<text>{{ item.pv }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--  -->
		<u-popup v-model="showPopup" border-radius="10" mode="center">
			<view class="popup">
				<text class="popup-title">提示</text>
				<text class="popup-content">是否清空所有浏览记录？</text>
				<view class="popup-bottom">
					<text @tap="showPopup = false">取消</text>
					<text class="confirm" @tap="handleConfirm">确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navbarBackground: {
				backgroundImage: 'linear-gradient(90deg, rgb(27,52,92), rgb(49,84,142))'
			},
			customStyle: {
				textAlign: 'left'
			},
			showPopup: false,
			swiperCurrent: 0,
			current: 0,
			enable: true,
			list: [
				{
					name: '话题'
				},
				{
					name: '直播'
				}
			],
			videoList: [],
			selectTime: '',
			options: [
				{
					label: '近7天',
					value: 1
				},
				{
					label: '近30天',
					value: 2
				},
				{
					label: '近3个月',
					value: 3
				},
				{
					label: '近6个月',
					value: 4
				},
				{
					label: '近1年',
					value: 5
				}
			]
		};
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		this.getLiveList(1);
	},
	methods: {
		getLiveList(type) {
			// 获取话题列表
			uni.showLoading({
				title: '加载中...'
			});
			this.$tkRequest('/api/User/getBrowseLog', {
				type: type
			}).then(res => {
				this.videoList = res.data.map(item => {
					return JSON.parse(item.content);
				});
			});
		},
		tabsChange(index) {
			this.swiperCurrent = index;
		},
		transition(e) {
			let dx = e.detail.dx;
			this.$refs.uTabs.setDx(dx);
		},
		animationfinish(e) {
			let current = e.detail.current;
			this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},
		handleConfirm() {
			uni.showLoading({
				title: '正在清空...'
			});
			this.$tkRequest('/api/User/clearBrowseLog').then(res => {
				uni.showToast({
					title: res.msg
				});
				this.showPopup = false;
				this.getLiveList(1);
			});
		}
	},
	watch: {
		selectTime: function() {
			this.getLiveList(this.selectTime);
		}
	}
};
</script>

<style lang="scss" scoped>
.slot {
	padding: 0 $uni-spacing-row-lg;
	color: #f1f1f1;
	font-size: 11pt;
	/* #ifdef APP-PLUS */
	font-size: 14pt;
	/* #endif */
}

.main {
	.select {
		background-color: #fff;
	}

	.list {
		padding: $uni-spacing-col-base $uni-spacing-row-lg;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			position: relative;
			width: 49%;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			margin: 12rpx 0;
			border-radius: 10rpx;
			box-shadow: 0 5rpx 10rpx #eee;
			overflow: hidden;

			.item-info {
				padding: $uni-spacing-col-sm $uni-spacing-row-sm;
				display: flex;
				flex-direction: column;

				.item-title {
					font-size: 12pt;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					font-weight: bold;
					padding: $uni-spacing-col-sm 0;
				}

				.item-time {
					padding: $uni-spacing-col-base 0;
					color: #999;
				}

				.item-pv {
					padding: $uni-spacing-col-sm;
					display: flex;
					align-items: center;
					flex-grow: 15rpx;

					text {
						padding-left: 15rpx;
					}
				}
			}
		}
	}
}

.popup {
	width: 70vw;
	padding: $uni-spacing-col-lg $uni-spacing-row-lg;
	display: flex;
	flex-direction: column;
	align-items: center;

	.popup-title {
		font-size: 12pt;
	}

	.popup-content {
		font-size: 1rem;
		padding: 40rpx 0;
	}

	.popup-bottom {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-top: $uni-spacing-col-lg;
		font-size: 12pt;

		text {
			flex: 1;
			text-align: center;
		}

		.confirm {
			color: #3f6cb7;
		}
	}
}
</style>
